<template>
    <div>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="姓名">
                <el-input size="small" v-model="formInline.employee.name" clearable placeholder="输入申请员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="申请岗位">
                <el-input size="small" v-model="formInline.applyPosition" clearable placeholder="请输入申请岗位"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">申请调岗</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据列表 -->
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="serialNumber" label="申请编号" width="150">
            </el-table-column>
            <el-table-column prop="employee.name" label="姓名" width="150">
            </el-table-column>
            <el-table-column prop="currentPosition" label="当前岗位" width="150">
            </el-table-column>
            <el-table-column prop="applyPosition" label="申请岗位">
            </el-table-column>
            <el-table-column prop="applyTiame" label="申请时间">
            </el-table-column>
            <el-table-column prop="callTime" label="调动时间" width="180">
            </el-table-column>
            <el-table-column prop="activitiInstanceId" label="任务id">
            </el-table-column>
            <el-table-column label="操作" min-width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">同意</el-button>
                    <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">驳回</el-button> -->
                    <!-- <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" :pager-count="11"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
        </el-row>
        <!-- 添加申请界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'
            :append-to-body="true">
            <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
                <el-form-item label="申请编号" prop="serialNumber">
                    <el-input size="small" v-model="editForm.changePosts.serialNumber" auto-complete="off"
                        placeholder="请输入申请编号">
                    </el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="employee">
                    <el-input size="small" v-model="editForm.changePosts.employee.name" auto-complete="off"
                        placeholder="请输入申请人姓名">
                    </el-input>
                </el-form-item>
                <el-form-item label="当前岗位" prop="currentPosition">
                    <el-input size="small" v-model="editForm.changePosts.currentPosition" placeholder="请输入当前岗位">
                    </el-input>
                </el-form-item>
                <el-form-item label="申请岗位" prop="applyPosition">
                    <el-input size="small" v-model="editForm.changePosts.applyPosition" auto-complete="off"
                        placeholder="请输入申请岗位">
                    </el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="applyTiame">
                    <el-input size="small" v-model="editForm.changePosts.applyTiame" auto-complete="off"
                        placeholder="请输入申请时间">
                    </el-input>
                </el-form-item>
                <el-form-item label="调动时间" prop="callTime">
                    <el-input size="small" v-model="editForm.changePosts.callTime" auto-complete="off"
                        placeholder="请输入调动时间">
                    </el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="user1">
                    <el-input size="small" v-model="editForm.user1" auto-complete="off" placeholder="请输入申请人">
                    </el-input>
                </el-form-item>
                <el-form-item label="下一审批人" prop="user2">
                    <el-input size="small" v-model="editForm.user2" auto-complete="off" placeholder="请输入审批人">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editForm)">
                    保存
                </el-button>
            </div>
        </el-dialog>
        <!-- 同意界面 -->
        <!-- <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'
            :append-to-body="true">
            <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
                <el-form-item label="上级负责人" prop="serialNumber">
                    <el-input size="small" v-model="editForm.serialNumber" auto-complete="off" placeholder="请输入申请编号">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editForm)">
                    保存
                </el-button>
            </div>
        </el-dialog> -->
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            total: 1,
            tableData: [],
            loading: false, //是显示加载
            title: '添加申请',
            editFormVisible: false, //控制编辑页面显示与隐藏
            dataAccessshow: false, //控制数据权限显示与隐藏
            unitAccessshow: false, //控制所属单位隐藏与显示
            formInline: {
                employee: {
                    name: ""
                },
                applyPosition: ""
            },
            // 添加
            editForm: {
                changePosts: {
                    id: "",
                    serialNumber: "",
                    employee: {
                        name: ""
                    },
                    currentPosition: "",
                    applyPosition: "",
                    applyTiame: "",
                    callTime: ""
                },
                user: "",
                user1: "",
                user2: ""
            },
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.$http.post("/manpower/changeposts/getPageByCondition", {
                changePosts: this.formInline,
                currPage: val,
                pageSize: 10
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                        this.total = r.data.data.totalNums
                    this.loading = false
                }
            })

        },

        // 获取数据方法
        getdata(form) {
            this.loading = true
            this.$http.post("/manpower/changeposts/getPageByCondition", {
                changePosts: form,
                currPage: 1,
                pageSize: 10
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                        this.total = r.data.data.totalNums,
                        console.log(this.total)
                }
            })
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            if (row.id != null && row.id != 'undefined') {
                this.title = '同意'
                this.editForm.changePosts.id = row.id
                this.editForm.changePosts.serialNumber = row.serialNumber
                this.editForm.changePosts.employee.name = row.name
                this.editForm.changePosts.currentPosition = row.currentPosition
                this.editForm.changePosts.applyPosition = row.applyPosition
                this.editForm.changePosts.applyTiame = row.applyTiame
                this.editForm.changePosts.callTime = row.callTime
                this.editForm.changePosts.activitiInstanceId = row.activitiInstanceId
                this.editForm.user2 = row.user2
            } else {
                this.title = '添加申请'
                this.editForm.changePosts.serialNumber = ''
                this.editForm.changePosts.employee.name = ''
                this.editForm.changePosts.currentPosition = ''
                this.editForm.changePosts.applyPosition = ''
                this.editForm.changePosts.applyTiame = ''
                this.editForm.changePosts.callTime = ''
                this.editForm.user1 = ''
                this.editForm.user2 = ''
            }
        },
        //搜索事件
        search() {
            console.log(this.formInline)
            this.getdata(this.formInline)
        },
        // 完成、添加申请提交方法
        submitForm(editForm) {
            console.log(editForm);
            if (editForm.changePosts.id != null && editForm.changePosts.id != "") {
                console.log("修改进来了");
                this.$http.post("/manpower/changeposts/down", editForm).then(r => {
                    console.log(r)
                    if (r.data.code == 200) {
                        alert("审批成功")
                    } else {
                        alert("审批失败")
                    }
                })
            } else {
                console.log("添加进来了");
                this.$http.post("/manpower/changeposts/add", editForm).then(r => {
                    console.log(r)
                    if (r.data.code == 200) {
                        alert("添加成功")
                    } else {
                        alert("添加失败")
                    }
                })
            }
        },
        // 关闭编辑、增加弹出框
        closeDialog(dialog) {
            if (dialog == 'edit') {
                this.editFormVisible = false
            } else if (dialog == 'perm') {
                this.dataAccessshow = false
            } else if (dialog == 'unit') {
                this.unitAccessshow = false
            }
        },
        // 删除员工
        // deleteUser(index, row) {
        //     console.log(row);
        //     this.$http.post("/manpower/changeposts/del/" + row.id).then(r => {
        //         console.log(r)
        //         if (r.data.code == 200) {
        //             alert("删除成功")
        //         } else {
        //             alert("删除失败")
        //         }
        //     })
        // }

    },
    created: function () {
        console.log(this.formInline)
        this.$http.post("/manpower/changeposts/getPageByCondition", {
            changePosts: this.formInline,
            currPage: 1,
            pageSize: 10
        }).then(r => {
            console.log(r)
            if (r.data.code == 200) {
                this.tableData = r.data.data.data,
                    this.total = r.data.data.totalNums,
                    console.log(this.total)
            }
        })
    }
}
</script>


<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
</style>